<template>
  <div
    style="margin-top: 30px; margin-bottom: 30px"
    class="publications-container"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div class="publications_box publications-bg-light">
      <div
        class="publications__wrapper"
        :style="{ maxWidth: modelValue?.width + 'px' }"
      >
        <!-- 第一组数据 -->
        <div class="pub-main">
          <h4 style="font-size: 24px" class="publications-title-blue">
            {{ firstMain.title }}
          </h4>
          <div style="margin-top: 20px" class="pub_main_text">
            {{ firstMain.text }}
          </div>
          <div class="publications-mt-medium publications-mt-medium-xlarge">
            <ul
              class="publications-grid publications-grid-2 publications-grid-md-4"
              v-if="modelValue?.list?.sections"
              :key="activePage"
            >
              <li
                v-for="(item, index) in firstArr[activePage - 1]"
                :key="index"
                data-aos="fade-right"
                data-aos-duration="1500"
                :data-aos-delay="index * 100"
                class="publications-grid-item"
              >
                <div class="card-publication">
                  <div class="publication__head">
                    <a
                      @click="changeRoute(item.fileUrl)"
                      rel="noopener noreferrer"
                      class="header_img"
                      style="cursor: pointer"
                    >
                      <img :src="item.image" :alt="item.title" />
                      <div class="publication__img__mask">
                        <div class="publication__img__mask__btn">阅读</div>
                      </div></a
                    >
                  </div>
                  <div class="publication__body">
                    <a
                      @click="changeRoute(item.fileUrl)"
                      rel="noopener noreferrer"
                      class="publication__title publications-line-clamp-2"
                      style="font-weight: bold; cursor: pointer"
                    >
                      {{ item.title }}
                    </a>
                    <!---->
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 分页 -->
          <Pagination
            :total="firstArr.length"
            :activePage="activePage"
            @page-change="handlePageChange"
          ></Pagination>
        </div>
        <!-- 其余的数据 -->
        <div class="pub-sub" style="margin-top: 110px">
          <ul class="pub-sublist__row row row-cols-md-2">
            <li v-for="list in subMain" :key="list.key">
              <h4 class="publications-title-blue">{{ list.title }}</h4>
              <div class="pub-sub__text publications-mt-small">
                {{ list.text }}
              </div>
              <div class="publications-mt-small">
                <div class="circle-link">
                  <a style="cursor: pointer" @click="changeRoute(item.fileUrl)">
                    <div>{{ list.button }}</div>
                    <span class="circle-link__icon"></span
                  ></a>
                </div>
              </div>
              <div class="publications-mt-medium" style="margin-top: 40px">
                <ul
                  class="pub-subitem__row publications-grid publications-grid-2"
                  v-if="list.publications && list.publications.length"
                >
                  <li
                    v-for="(item, index) in list.publications.slice(0, 2)"
                    :key="index"
                    data-aos="fade-in"
                    data-aos-duration="1500"
                    class="publications-grid-item aos-init aos-animate"
                  >
                    <div class="card-publication">
                      <div class="publication__head">
                        <a
                          style="cursor: pointer"
                          @click="changeRoute(item.fileUrl)"
                          rel="noopener noreferrer"
                          class="publication__img img-wrapper"
                          ><img :src="item.image" alt="111111" />
                          <div class="publication__img__mask">
                            <div class="publication__img__mask__btn">阅读</div>
                          </div></a
                        >
                      </div>
                      <div class="publication__body">
                        <a
                          style="cursor: pointer"
                          @click="changeRoute(item.fileUrl)"
                          rel="noopener noreferrer"
                          class="publication__title publications-line-clamp-2"
                        >
                          {{ item.title }}
                        </a>
                        <!---->
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
    <!-- </a-row> -->
  </div>

  <Setting
    v-if="!isPreview"
    v-model:show="showSetting"
    :data="modelValue"
  ></Setting>
</template>

<script lang="ts" setup>
import Pagination from "@/common/Pagination/Pagination.vue";
import { ref, watch } from "vue";
import { randomString, generateFormattedKey } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";

// 定义组件名称
defineOptions({
  name: "Publications",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});

console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
  "handleClick",
]);
const changeRoute = (url: string) => {
  emit("handleClick", url);
};
const chunkArray = (arr: any[], chunkSize: number) => {
  const result = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    result.push(arr.slice(i, i + chunkSize));
  }
  return result;
};
const firstMain = ref<any[]>([]); //any类型第一组的数据
const firstArr = ref<any[]>([]); //第一组数据：二维数组
const subMain = ref<any[]>([]); //除了第一组剩下的数据
//监听modelValue变化
watch(
  () => props.modelValue,
  (newVal: any) => {
    //若modelValue.list.sections数组中有数组取下标为0的重新赋值
    if (newVal && newVal.list && newVal.list.sections.length > 0) {
      firstMain.value = newVal.list.sections[0];
      const outputArray = chunkArray(firstMain.value.publications, 8);
      firstArr.value = outputArray;
      subMain.value = newVal.list.sections.slice(1);
      console.log("subMain.value", subMain.value);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const activePage = ref(1);
const handlePageChange = (page: number) => {
  console.log("分页========", page);
  activePage.value = page;
};

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.list && props.modelValue.list.sections.length) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    width: 800,
    bgColor: "#f8f9fa",
    type: "Publications",
    list: {
      sections: [
        {
          key: generateFormattedKey(),
          title: "title11111???",
          text: "text1111??",
          button: "view all",
          publications: [
            {
              id: 111,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 2222,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
          ],
        },
        {
          key: generateFormattedKey(),
          title: "title22222",
          text: "text1111",
          button: "view all",
          publications: [
            {
              id: 890,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 89000,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
          ],
        },
        {
          key: generateFormattedKey(),
          title: "title33333",
          text: "text1111",
          button: "view all",
          publications: [
            {
              id: 34,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
            {
              id: 89,
              title: "pub-title1",
              image:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
              fileUrl:
                "https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001_origin.jpg",
            },
          ],
        },
      ],
    },
  };
  emit("update:modelValue", data);
};

handleInit();
</script>

<style lang="scss" scoped>
.publication__img {
  object-fit: contain;
  position: relative;
  width: 123px;
  height: 174px;
  display: flex;
  align-items: center;
  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
  }
}
.pub-sublist__row {
}
/* 基础容器样式 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

/* 子元素基础样式 */
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* row-cols-md-2 的原生实现 */
/* 移动端（<768px）：单列布局，每个子元素占100%宽度 */
.row-cols-md-2 > * {
  flex: 0 0 auto;
  width: 100%; /* 移动端单列 */
}

/* 桌面端（≥768px）：2列布局，每个子元素占50%宽度 */
@media (min-width: 768px) {
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%; /* 桌面端2列，每列50%宽度 */
  }
}

/* 默认gutter变量TODO */
:root {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

.publication__img__mask__btn {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  color: #f7f7fa;
  padding: 6px 10px;
  min-width: 110px;
  border: 1px solid #f7f7fa;
  border-radius: 2px;
}
.publication__img__mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.25s ease-out;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 1;
  }
}
.pub_main_text {
}
.publications-container {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 12px;
}

/* 容器样式 */
.publications-container-max {
  margin: 0 auto;
  padding: 0 15px;
}

/* 标题颜色样式 */
.publications-title-blue {
  color: #1e3a8a; /* Tailwind text-blue-dark 等效 */
}

/* 间距样式 */
.publications-mt-small {
  margin-top: 1rem; /* mt-3 等效 */
}

.publications-mt-medium {
  margin-top: 1.5rem; /* mt-4 等效 */
}

/* 响应式间距 */
@media (min-width: 768px) {
  .publications-mt-medium-large {
    margin-top: 3rem; /* mt-md-5 等效 */
  }

  .publications-mt-medium-xlarge {
    margin-top: 6rem; /* mt-md-10 等效 */
  }
}

/* 网格布局样式 */
.publications-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: -15px;
  margin-right: -15px;
}

.publications-grid-item {
  margin-bottom: 30px;
  height: 212px;
  width: 174px;
}

/* 2列网格 */
.publications-grid-2 .publications-grid-item {
  flex: 0 0 37%;
  max-width: 50%;
}

/* 响应式4列网格 */
@media (min-width: 768px) {
  .publications-grid-md-2 .publications-grid-item {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .publications-grid-md-4 .publications-grid-item {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* 小屏幕下保持2列 */
@media (max-width: 767px) {
  .publications-grid-md-4 .publications-grid-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 文本截断样式 */
.publications-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 3em; /* 2行的高度 */
}

/* 移动端优化 */
@media (max-width: 576px) {
  .publications-container-max {
    padding: 0 10px;
  }

  .publications-grid-item {
    padding-left: 10px;
    padding-right: 10px;
  }

  .publications-grid {
    margin-left: -10px;
    margin-right: -10px;
  }

  /* 按钮在移动端缩小最小宽度 */
  .publication__img__mask__btn {
    min-width: 88px;
  }
}
.publication__head {
  position: relative;
  max-width: 89%;
  margin: 0 auto;
  height: 206px;
  display: flex;
  align-items: center;
  justify-content: center;
  .header_img {
    object-fit: contain;

    img {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: block;
    }
  }
}
.publications_box {
  margin: 0 auto;
}
.publication__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #0032a0;
}
</style>
